<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_商品列表练习</title>
</head>
<body>
<table border="1px">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    let productArr=[
        {title:'华为手机',price:5000,stock:100},
        {title:'苹果手机',price:8000,stock:200},
        {title:'小米手机',price:3000,stock:300},
        {title:'三星手机',price:4000,stock:400}
    ];
    let tableE=document.querySelector('table');
    for ( var i= 0; i < productArr.length; i++) {
        //创建tr与td
        let trE=document.createElement('tr');
        let titleTD=document.createElement('td');
        let priceTD=document.createElement('td');
        let stockTD=document.createElement('td');
        //给td设置值
        titleTD.innerHTML=productArr[i].title;
        priceTD.innerHTML=productArr[i].price;
        stockTD.innerHTML=productArr[i].stock;
        trE.append(titleTD,priceTD,stockTD);
        tableE.append(trE);
    }
</script>
</body>
</html>